<template>
  <main>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      popper-class="vertical-submenu"
      background-color="#545c64"
      text-color="#fff"
      :collapse="isCollapse"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="0">
        <i class="el-icon-s-custom"></i>
        <template slot="title">
          <span>欢迎 </span>
          <span style="margin: 0 10px; color: pink">{{ username }} </span>
          <span> 光临本网站</span>
        </template>
      </el-menu-item>
      <el-menu-item index="1" @click="hanldeRouter('homepage')">
      <i class="el-icon-s-home"></i>
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </template>
      </el-menu-item>
      <el-submenu index="2" v-if="showlist.reqShow || showlist.hasReqShow">
        <template slot="title">
          <i class="el-icon-s-goods"></i>
          <span>需求管理</span>
        </template>
        <el-submenu v-if="showlist.reqShow || showlist.hasReqShow" index="2-1">
          <template slot="title">需求列表</template>
          <el-menu-item
            v-if="showlist.reqShow"
            @click="hanldeRouter('requireManage')"
            index="2-1-1"
            >未发布</el-menu-item
          >
          <el-menu-item
            v-if="showlist.hasReqShow"
            @click="hanldeRouter('hasRequiredManage')"
            index="2-1-2"
            >已发布</el-menu-item
          >
        </el-submenu>
        <el-menu-item
          v-if="showlist.addReqShow"
          @click="hanldeRouter('addRequire')"
          index="2-2"
          >新增采购需求</el-menu-item
        >
      </el-submenu>
      <el-submenu
        index="3"
        v-if="
          showlist.waitBidShow || showlist.reviewShow || showlist.winBidShow
        "
      >
        <template slot="title">
          <i class="el-icon-s-shop"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item
          index="3-1"
          v-if="showlist.waitBidShow"
          @click="hanldeRouter('waitBid')"
          >待投标列表</el-menu-item
        >
        <el-menu-item
          index="3-5"
          v-if="showlist.waitBidShow"
          @click="hanldeRouter('hasBidList')"
          >已投标列表</el-menu-item
        >
        <el-menu-item
          index="3-2"
          v-if="showlist.reviewShow"
          @click="hanldeRouter('waitReview')"
          >待评审列表</el-menu-item
        >
        <el-menu-item
          index="3-3"
          v-if="showlist.winBidShow"
          @click="hanldeRouter('winBidList')"
          >待中标列表</el-menu-item
        >
        <el-menu-item
          index="3-4"
          v-if="showlist.winBidShow"
          @click="hanldeRouter('hasWinBidList')"
          >已中标列表</el-menu-item
        >
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-check"></i>
          <span>商机管理</span>
        </template>
        <el-menu-item
          index="4-1"
          v-if="showlist.addReqShow"
          @click="hanldeRouter('addRequire')"
          >需求填入</el-menu-item
        >
        <el-menu-item index="4-2">待开放</el-menu-item>
        <el-menu-item
          index="4-3"
          v-if="showlist.adminControl"
          @click="hanldeRouter('adminControl')"
          >用户管理</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </main>
</template>

<script>
import { mapGetters } from "vuex";
import Store from "store";

const displayConfig = {
  0: ["winBidShow", "reqShow", "hasReqShow", "addReqShow"],
  1: ["waitBidShow"],
  2: ["reviewShow"],
  3: ["adminControl"],
  all: [
    "winBidShow",
    "reqShow",
    "hasReqShow",
    "waitBidShow",
    "reviewShow",
    "addReqShow",
  ],
};

export default {
  name: "Nav",
  created() {
    console.log("hadfasdf", this.userInfo);
    // 控制展示哪一项为展示状态
    displayConfig[this.userInfo.role].forEach((e) => {
      this.showlist[e] = true;
    });
  },
  mounted() {
    console.log(this, Store);
  },
  data() {
    return {
      showlist: {
        winBidShow: false,
        reqShow: false,
        hasReqShow: false,
        waitBidShow: false,
        reviewShow: false,
        addReqShow: false,
      },
      isCollapse: true,
    };
  },
  computed: {
    username() {
      return Store.state.userInfo.username;
    },
    ...mapGetters(["userInfo"]),
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    hanldeRouter(route) {
      this.$router.push(route);
    },
  },
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  border-right: 0;
}
.el-menu-item {
  background: radial-gradient(circle, #72f0d3cf 300px, #1c9dc4a8);
}
.el-submenu__title {
  background: radial-gradient(circle, #72f0d3cf 300px, #1c9dc4a8);
}
.vertical-submenu {
  background: radial-gradient(circle, #72f0d3cf 300px, #1c9dc4a8);
}
</style>
